<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/btnplus.css" />
		<style type="text/css">
			html,body{
				background-color: #fff;
				overflow-y: auto;
				-webkit-overflow-scrolling:touch;
			}
			.car_insure_info{ background-color:#fff; padding: 15px;}
			.car_insure_info .tab{ height: 45px; background-color: #fff; position: relative;}
			.car_insure_info .tab::after{ position:absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #d5d5d5 solid; transform: scaleY(0.5);}
			.car_insure_info .tab a{ float: left; width: 33.33%; text-align: center; font-size: 14px; color: #333; line-height: 45px; position: relative;}
			.car_insure_info .tab a:hover,.car_insure_info .tab a.on{ color:#1c63fa; background-color: transparent;}
			.car_insure_info .tab a:hover::after,.car_insure_info .tab a.on::after{ position: absolute; content: ""; left: 50%; margin-left: -10px; bottom: 0; width: 20px; border-bottom: 1px #1c63fa solid; z-index: 2;}
			.car_insure_info .list{ padding: 0; height:257px; overflow: hidden;}
			.car_insure_info .people_list{ background-color: #f6fbff; border-radius: 6px; width: 100%; font-size: 14px; color: #333; text-align: center; padding: 10px 0;}
			.car_insure_info .people_list li{ line-height: 30px; height: 30px; overflow: hidden;}
			.car_insure_info .people_list div{ float: left; text-align: center; overflow: hidden; height: 25px;}
			.car_insure_info .people_list div:nth-child(1){ width: 22%;}
			.car_insure_info .people_list div:nth-child(2){ width: 34%;}
			.car_insure_info .people_list div:nth-child(3){ width: 20%;}
			.car_insure_info .people_list div:nth-child(4){ width: 22%;}

			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.more{ padding: 1.20rem 0; text-align: center; font-size: 0.26rem; color: #999; line-height: 0.60rem;}
			.display-none{ display:none; }
			.text-center { text-align: center !important; }
		</style>
	</head>
	<body>
		<div class="car_insure_info">
			<ul class="list">
				<div class="people_list">
					<ul id="scrolllist">
						
					</ul>
					<script id="logslist_template" type="text/template">
						{{ for (var i = 0, len = it.length; i < len; i++) { }}
						<li>
							<div>{{=it[i].nickname}}</div>
							<div>{{=it[i].mobile}}</div>
							<div>{{=it[i].city}}</div>
							<div>{{=it[i].createtime}}前</div>
						</li>
						{{ } }}
					</script>
				</div>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">

		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			$api.css($api.dom('.car_insure_info'), 'display: none');
			showloading();
			getJsonFromAPI();
			
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				getJsonFromAPI();				
			});
			
		}
		function fnScrollList(){
			 this.init.apply(this,arguments);
		}
		fnScrollList.prototype = {
			init:function(listId,TagName,scrollNum,speed){
				var _this = this;
				this.oList = this.$$(listId);
				this.scrollTimer = null;
				this.speed = speed || 1000;
				this.scrollNum = scrollNum || 1;
				this.TagName =TagName;
				this.distance = this.oList.getElementsByTagName(TagName)[0].offsetHeight * this.scrollNum;//列表移动距离
				this.oList.style.marginTop = 0 + "px";

				this.oList.onmouseover = function(){
					_this.pause();
				}	
				this.oList.onmouseout = function(){
					_this.scrollTimer= setTimeout(function(){
						_this.play();
					},_this.speed);
				}
				this.play();
			},
			play:function(){
				var _this = this;
				var options = {'marginTop':'-'+_this.distance};
				_this.anim(_this.oList,options,function(){ //回调函数，移动列表元素
					for(var i = 0,j = 0;i<_this.scrollNum;i++){
						var node = _this.oList.getElementsByTagName(_this.TagName)[j];
						if(_this.TagName == "tr"){
							_this.oList.getElementsByTagName('tbody')[0].appendChild(node);
						}else{
							_this.oList.appendChild(node);
						}
					}
					_this.oList.style.marginTop = "0px";
				});

				_this.scrollTimer= setTimeout(function(){
						_this.play(_this.distance);
					},_this.speed);		    		
			},
			pause:function(){
				clearTimeout(this.scrollTimer);
			},
			//动画函数
			anim:function(oElement,oAttr,fnCallback){ 
				var _this = this;
				clearInterval(oElement.timer);
				oElement.timer = setInterval(function(){
					var bStop = true;
					for(var property in oAttr){
						var iCur = parseFloat(_this.css(oElement, property)); //获取当前位置属性值
						var iSpeed = (oAttr[property] - iCur) / 5; //移动进度
						iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
						if (iCur != oAttr[property]) { //如果当前数值不等于目标数值，则数值递增
							bStop = false;
							_this.css(oElement, property, iCur + iSpeed);
						}
					}
					if(bStop){
						clearInterval(oElement.timer);
						fnCallback && fnCallback.apply(_this, arguments);
					}
				},50);
			},
			//处理样式函数
			css:function(oElement, attr, value){
				if (arguments.length == 2) {
					return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr];
				} else if (arguments.length == 3) {
					switch (attr) {
						case "top":
						case "left":
						case "marginTop":
							oElement.style[attr] = value + "px";
							break;
						default:
							oElement.style[attr] = value;
							break;
					}
				}
			},
			$$:function(o){
				if(o){
					return document.getElementById(o);
				}
			}
		};

		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/insureextra',
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						hideloading();
						$api.css($api.dom('.car_insure_info'), 'display: block');
						if (ret) {
							
							if(ret.list.length > 0)
							{
								var isAppend = false;
								var logslist = ret.list;
								UpdateList('scrolllist','logslist_template',logslist,isAppend);
							}
							
							
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			//alert(isAppend);
			console.log(resultText);
			if(isAppend)
			{
				$api.append(act_content, resultText);
			}
			else
			{
				$api.html(act_content, resultText);
			}
			api.parseTapmode();
			
			var list = new fnScrollList('scrolllist','li',1,2000);
		}
	</script>
</html>